<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    正在测试ajax的二合一封装
    <input type="button" id="btn1" value="get请求">
    <input type="button" id="btn2" value="post请求">
    <div id="box"></div>
</body>
<script>
    const obtn1 = document.getElementById("btn1")
    const obtn2 = document.getElementById("btn2")

    obtn1.onclick = function(){
        ajax({
            url:"http://localhost:3000/api",
            success:res=>{
                console.log(res);
            }
        })
    }

    obtn2.onclick = function(){
        ajax({
            type:"post",         // 可选，默认为get
            url:"http://localhost:3000/api",             // 必传
            success:res=>{
                console.log(res)
            },     // 必传
            error:code => {
                console.log(code)
            },       // 可选，默认不执行
            data:{
                a:10,b:20,c:30,d:40
            }             // 可选，默认为空对象
        })
    }

    function ajax(ops){
        // 解析参数并处理默认值
        ops = ops || {};
        let {data={}, type="get", url, success, error} = ops;

        // 处理数据
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }

        // 根据请求方式，决定是否将数据拼接到url
        if(type === "get"){
            url += "?" + str.slice(0,str.length-1);
        }

        // 开启ajax
        const xhr = new XMLHttpRequest();
        xhr.open(type, url, true);
        xhr.onload = function(){
            // 根据http状态，判断成功或失败，执行不用的功能处理
            if(xhr.status === 200){
                success(xhr.responseText);
            }else{
                error && error(xhr.status);
            }
        }
        // 根据请求方式，决定send的姿势
        if(type === "get"){
            xhr.send();
        }else{
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(str);
        }
    }

</script>
</html>